<template>
	<view class="container">
		<view class="top-nav">
			<view @click="backBtn">返回</view>
			<view>求救信息</view>
			<view></view>
		</view>
		<view class="submit-type">
			发布类型:
			<label class="radio">
				<radio @click="radioHandle1" :checked="()=>checked1 = !checked1" /><text>求救信息</text>
				<radio @click="radioHandle2" :checked="()=>checked2 = !checked2" /><text>提供援助</text>
				<radio @click="radioHandle3" :checked="()=>checked3 = !checked3" /><text>志愿者信息</text>
			</label>

		</view>

		<view class="submit-content">
			信息内容：
			<textarea placeholder="请输入信息" class="rich-content" v-model="material">

			</textarea>

			<!-- <editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor>
			        <button type="warn" @tap="undo">撤销</button> -->

		</view>
		<view class="my-location">
			<view class="">
				位置:
			</view>
			<view @click="getLocation" class="my-location-btn">
				获取位置
			</view>
		</view>
		<view class="input1">
			<view class="">当前位置:</view>
			<input type="text" v-model="address" placeholder="请输入当前位置" />
		</view>
		<view class="input1">
			<view class="">联系人&nbsp;&nbsp;&nbsp;</view>
			<input type="text" v-model="contactsPerson" placeholder="请输入姓名" />
		</view>
		<view class="input1">
			<view class="">联系电话:</view>
			<input type="text" v-model="mobilePhone" placeholder="请输入联系电话" />
		</view>
		<view class="user-info">
			微信头像：
		</view>

		<view class="user-name">
			微信昵称
		</view>
		<view class="att-info">
			注意：<br />
			1、请核实信息的时效与准确<br />
			2、有最新消息请及时反馈
		</view>
		<view class="release-btn" @click="submitHelp()">
			发布
		</view>
		<view class="foot-back">

		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				contactsPerson: '',
				createTime: '',
				trappedPersons: '',
				mobilePhone: '',
				placeholder: '开始输入...',
				address: '',
				longitude: '',
				latitude: '',
				material: '',
				openId: '',
				nodes: '',
				checked1: true,
				checked2: false,
				checked3: false,
				baseUrl: "http://weixiaokong.91xiaokong.com/jeecg-boot/",
				rescueType: 1
				// placeholder1:"被困人数：<br/>物资/服务名称：<br/>特别说明备注："
			}
		},
		onLoad(options) {
			// this.onEditorReady();
			// uni.request({
			// 	url:"https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=H5OBZ-6SXKK-ETJJH-AC5ZY-ZTMPE-5DFZF&get_poi=1",
			// 	data:{},
			// 	success(res) {
			// 		console.log(res)
			// 	}
			// })
			this.openId = options.openId;
			_this = this;
		},
		methods: {
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},

			// 返回按钮
			backBtn() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取位置
			getLocation() {
				uni.getLocation({
					geocode: true,
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res);
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						uni.request({
							url: _this.baseUrl + "rescue/hnjzRescueInformation/geocoder",
							method: 'POST',
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							data: {
								// location: '39.984154,116.307490'
								location: _this.latitude + ',' + _this.longitude
							},
							success(res) {
								// console.log(res.data.result.result.address);
								_this.address = res.data.result.result.address;


							},
							fail(err) {
								console.log(err);
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				});

			},
			// 提交信息
			submitHelp() {
				const {address,contactsPerson,mobilePhone,material,openId,rescueType} = _this;
				uni.request({
					method: "POST",
					url: _this.baseUrl + 'rescue/hnjzRescueInformation/add', //仅为示例，并非真实接口地址。
					data: {
						address,
						contactsPerson,
						mobilePhone,
						material,
						openId,
						rescueType,
						createTime: moment().format("YYYY-MM-DD HH:mm:ss"),
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: '发布成功'
						})
						uni.navigateBack({
							delta: 2
						})
					},
					fail(err) {
						console.log(err);
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		/* margin-left: 30rpx; */
		padding-top: 100rpx;
	}

	#editor {
		width: 100%;
		height: 300rpx;
		background-color: #CCCCCC;
	}

	button {
		margin-top: 10px;
	}

	.top-nav {
		margin: 0 auto;
		/* width: 90%; */
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 0 5%;
		background-color: #FFFFFF;
		z-index: 1000;
	}

	.submit-type {
		font-size: 28rpx;
		/* margin-top: 20rpx; */
		height: 80rpx;
		border-top: #ccc 1rpx solid;
		line-height: 80rpx;
		padding: 0 20rpx;
	}

	.submit-type radio {
		margin-left: 10rpx;
	}

	.uni-radio-input {
		width: 30rpx !important;
		height: 30rpx !important;
	}

	.input-content {
		border: 1rpx #000 solid;
		height: 300rpx;
		width: 80%;
	}

	.submit-content {
		height: 300rpx;
		display: flex;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.rich-content {
		/* text-align: end; */
		/* line-height: 30rpx; */
		height: 260rpx;
		width: 72%;
		/* border: 1rpx #000 solid; */
		border-radius: 20rpx;
		background-color: #DDDDDD;
		padding: 20rpx;
		font-size: 28rpx;
	}

	.my-location {
		margin-left: 45rpx;
		font-size: 28rpx;
	}

	.my-location,
	.my-location-info {
		display: flex;
		/* margin-left: 40rpx; */
		margin-top: 30rpx;
	}



	.my-location-btn {
		padding: 5rpx 30rpx 5rpx 30rpx;
		border-radius: 40rpx;
		margin-left: 80rpx;
		background-color: #b30002;
		color: #FFFFFF;
		line-height: 40rpx;
		height: 40rpx;
	}

	.input1 {
		margin-top: 30rpx;
		margin-left: 45rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.input1 input {
		margin-left: 40rpx;
		width: 70%;
		height: 80rpx;
		/* border: #000 solid 1rpx; */
		border-radius: 40rpx;
		background-color: #DDDDDD;
		padding: 0 10rpx;
		font-size: 28rpx;
	}

	.user-info {
		display: flex;
		margin-left: 40rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	.user-head {
		width: 40rpx;
		height: 40rpx;
		background-color: #baf;
		border-radius: 20rpx;
	}

	.user-name {
		margin-left: 40rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	.release-btn {
		width: 80%;
		height: 80rpx;
		margin: 50rpx auto;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #b30002;
		color: #FFFFFF;
	}

	.foot-back {
		width: 100%;
		height: 400rpx;
		/* background-color: #ccc; */
	}

	.att-info {
		margin: 10rpx 0 0 45rpx;
		font-size: 30rpx;
		color: #b30002;
	}
</style>
